<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <van-icon
        name="arrow-left"
        slot="left"
        color="#666"
        @click="goBack"
      />
      <van-icon
        name="ellipsis"
        color="#333"
        size="18px"
        slot="right"
      />
    </van-nav-bar>
    <main>
      <div class="article">
        <div><h2 class="article-title">{{ articleDetails.title }}</h2></div>
        <!-- 文章信息 -->
        <div class="article-information">
          <span>{{ getTime(articleDetails.pubdate) }}</span>
          <span> | </span>
          <span>{{ articleDetails.read_count }} 阅读 | </span>
          <span> {{ articleDetails.comm_count }}评论</span>
        </div>
        <!-- 吸顶 -->
        <van-sticky
          offset-top="8"
          @change="onChange"
        >
          <div
            v-if="on"
            class="author"
          >
            <div class="author-avatar-bar">
              <img :src="articleDetails.aut_photo">
              <span>{{ articleDetails.aut_name }} &nbsp;</span>
              |
              <span class="author-avatar-bar-color"> &nbsp;关注</span>
            </div>
          </div>
        </van-sticky>

        <!-- 作者 -->
        <div class="author">
          <div class="author-avatar">
            <img :src="articleDetails.aut_photo">
            <span>{{ articleDetails.aut_name }}</span>
            <van-button
              round
              type="info"
              size="small"
              color="#fc6627"
              class="concern-author"
              @click="follow(articleDetails.aut_id)"
            >
              + 关注
            </van-button>
          </div>
        </div>
        <!-- 文章内容 -->
        <div v-html="articleDetails.content"></div>
        <div class="article-publish-time">
          <span>发布文章时间：</span>
          <span>{{ getTime(articleDetails.pubdate) }}</span>
        </div>
      </div>
      <!-- 分隔栏 -->
      <div class="divider"></div>


      <!-- 评论 -->
      <div class="comments">
        <!-- 评论导航栏 -->
        <van-sticky offset-top="46px">
          <div class="comments-title">
            <span>
              全部评论
              {{ articleDetails.comm_count }}
            </span>
            <div class="thumbs-up">
              <span>
                点赞
              </span>
            </div>
          </div>
        </van-sticky>
        <div
          v-for="(item, i) in articleComments"
          :key="i"
        >
          <div class="author-avatar">
            <img :src="item.aut_photo">
            <span>{{ articleDetails.aut_name }}</span>
            <div class="icon-job">
              <span>{{ item.like_count }}</span>
              <van-icon
                name="good-job-o"
                size="18px"
              />
            </div>
            <div class="comments-text">
              {{ item.content }}
            </div>
            <div>
              <span class="comments-btn">
                回复 >
              </span>
              <span class="comments-time">{{ getCommentTime(item.pubdate) }}</span>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <van-goods-action>
        <van-search
          shape="round"
          left-icon="edit"
          placeholder="抢沙发..."
          @click="comments"
        />
        <van-goods-action-icon
          icon="chat-o"
          text="评论"
          :badge="articleDetails.comm_count"
        />
        <van-goods-action-icon
          icon="good-job-o"
          text="点赞"
          @click="agree"
        />
        <van-goods-action-icon
          icon="like-o"
          text="收藏"
        />
        <van-goods-action-icon
          icon="share-o"
          text="分享"
        />
      </van-goods-action>
      <van-popup
        v-model="show"
        position="bottom"
        :style="{height: '100%'}"
      >
        <nav-bar
          title="评论文章"
          @click.native="quit"
        >
          <span>发表</span>
        </nav-bar>
      </van-popup>
    </footer>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import moment from 'moment';
import * as userApi from '@/api/user'

export default {
  name: 'ArticlePage',
  data() {
    return {
      show: false,
      on: false,
    };
  },
  computed: {
    ...mapState('article', [
      'articleDetails',
    ]),
    ...mapState('article', [
      'articleComments',
    ]),
  },
  methods: {
    ...mapActions('article', [
      'updateArticleComments',
    ]),
    ...mapActions('article', [
      'updateArticleDetails',
    ]),
    goBack() {
      this.$router.go(-1);
    },
    getTime(time) {
      return moment(time).format('YYYY年MM月DD日');
    },
    getCommentTime(time) {
      return moment(time)
        .startOf('hour')
        .fromNow();
    },
    onChange(e) {
      if (e) {
        this.on = true;
      } else {
        this.on = false;
      }
    },
    onScroll() {
      this.headerInfoVisible = this.$refs.section.scrollTop > h;
    },
    follow(id) {
      userApi.follow(id)
        .then(msg => {
          this.$notify({
            message: msg,
            type: 'success',
          });
        })
        .catch(msg => {
          this.$notify({
            message: msg,
          });
        });
    },
    agree() {
      console.log(1);
    },
    comments() {
      this.show = true;
    },
    quit() {
    }
  },
  created() {
    const { id } = this.$route.params;
    this.updateArticleDetails(id);
    this.updateArticleComments(id);
    console.log(id);
  },
}
</script>
<style src="highlight.js/styles/gradient-dark.css"></style>
<style lang="less" scoped>
.author-avatar-bar {
  display: inline-block;
  transform: translateX(50%);
  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    vertical-align:middle;
  }
  text-align: center;
  .author-avatar-bar-color {
    color: red;
  }
}
.author-avatar {
    padding: 20px 0;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-block;
      vertical-align:middle
    };
    span {
      vertical-align:middle;
      margin-left: 6px;
    };
    .concern-author {
      float: right;
    }
  }
main {
  height: calc(100vh - 96px);
  padding-bottom: 50px;
  overflow: auto;
}
.article {
  padding: 14px 14px  20px 14px;

  .article-title {
  font-weight: 400;
  };
  .article-information {
    color: #666;
    font-size: 14px;
  };
  .article-publish-time {
      text-align: right;
      margin: 30px 0;
      color: #999;
    }
}
 .divider {
      width: 100%;
      height: 20px;
      background-color: #f7f8fa;
}
.comments {
  padding: 0 14px;
  .comments-title {
    padding: 16px 14px;
    background-color: white;
  };
  .thumbs-up {
    float: right;
    color: #999;
    font-size: 14px;
  };
  .icon-job {
    float: right;
    line-height: 40px;
  };
  .comments-text {
    margin-left: 44px;
    margin-bottom: 12px;
  }
  .comments-btn {
    padding: 6px 10px;
    background-color: #f7f8fa;
    border-radius: 9999px;
    margin-left: 42px;
  };
  .comments-time {
    margin-left: 12px;
    font-size: 14px;
    color: #999;
  }
}


</style>
